<template>
  <div class="apps">
    <nav-bar title="分类" closeBack="1"></nav-bar>
    <app-list v-if="!!appsMale" class="apps-list" :app-list="appsMale" app-type="1"></app-list>
    <app-list v-if="!!appsFemale" class="apps-list" :app-list="appsFemale" app-type="2"></app-list>
    <app-list v-if="!!appsPress" class="apps-list" :app-list="appsPress" app-type="3"></app-list>
    <tab-bar></tab-bar>
    <loading v-model="loading"></loading>
  </div>
</template>
<script>
import { Loading } from 'vux';
import NavBar from '@/components/NavBar';
import TabBar from '@/components/TabBar';
import AppList from '@/components/AppList';
import { getApps } from '@/store/api';

export default {
  components: {
    NavBar,
    TabBar,
    Loading,
    AppList
  },
  data() {
    return {
      loading: false,
      appsFemale: '',
      appsMale: '',
      appsPress: ''
    };
  },
  created() {
    this.getApp();
  },
  methods: {
    getApp() {
      this.loading = true;
      getApps().then(
        (res) => {
          this.loading = false;
          if (!!res.body.ok) {
            this.appsFemale = res.body.female;
            this.appsMale = res.body.male;
            this.appsPress = res.body.press;
          } else {
            this.$vux.toast.show({
              text: '获取失败',
              width: '7.6em',
              type: 'text'
            });
          }
        },
        () => {
          this.loading = false;
          this.$vux.toast.show({
            text: '网络错误，请重试',
            type: 'text'
          });
        }
     );
    },
  }
};
</script>
<style lang="scss">
  @function r($px) {
    @return ($px / 14 ) + rem;
  }
  .apps {
    padding-top: 43px;
    padding-bottom: 56px;
    &-list {
      padding:0 1rem;
    }
  }
</style>
